<template>
    <div>
<!--    评论列表 头部按钮-->
    <div>
        <el-card shadow="always" class="box-card">
            <el-row :gutter="20">
                <el-col :span="3" :offset="1" ><div class="grid-content bg-purple"><span>评论列表</span></div></el-col>
                <el-col :span="9" :offset="11">
                    <div class="grid-content bg-purple">
                        <el-button size="mini">刷新</el-button>
                        <el-button size="mini" @click="returnPage">返回</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
<!--    4个跳转按钮按钮-->
    <div class="box1" >
        <el-button size="medium">全部评论(<span style="color: red">{{tongji.all}}</span>)</el-button>
        <el-button size="medium" @click="butpass()">已通过(<span style="color: red">{{tongji.pass}}</span>)</el-button>
        <el-button size="medium" @click="butblock()">已拦截(<span style="color: red">{{tongji.block}}</span>)</el-button>
        <el-button size="medium" @click="butdel()">已删除(<span style="color: red">{{tongji.del}}</span>)</el-button>
    </div>
<!--        评论次数统计-->
    <el-card >
        <div>
            <div style="background-color: #F3F3F3 ; height: 50px">
                <span style="float:left ; padding-top: 10px ; font-size: 16px">当前客服：xxx</span>
            </div>
            <div >
                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="历史评论次数" size="100px">{{tongji.all}}</el-descriptions-item>
                    <el-descriptions-item label="历史评论人数" size="100px">{{commentime.historynumberuser}}</el-descriptions-item>
                    <el-descriptions-item label="今日评论次数" :span="1" size="100px">{{newdatecommenttime.newdatenumbertime}}</el-descriptions-item>
                    <el-descriptions-item label="今日评论人数" :span="1" size="100px">{{newdatecommenttime.newdatetime}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div style="background-color: #F3F3F3 ; height: 50px">
                <span style="float:left ; padding-top: 10px;font-size: 16px" ><i class="el-icon-s-unfold"></i>评论列表</span>
                <div style="padding: 10px 10px ; float: right">
                    <el-button size="medium">显示条数 <i class="el-icon-caret-bottom"></i></el-button>
                    <el-button size="medium">排序方式 <i class="el-icon-caret-bottom"></i></el-button>
                </div>
<!--           表格数据-->
            </div>
                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="account"
                            label="成员账号">
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="butuserid(scope.row.userId)"
                                    type="text">
                                <router-link :to="`/comment/user/${scope.row.userId}`">{{scope.row.nickname}}</router-link>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="所属课程">
                    </el-table-column>
                    <el-table-column
                            prop="commentDate"
                            label="发言时间">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="发言内容">
                    </el-table-column>
                    <el-table-column
                            :prop="commentType"
                            label="状态">
                         <template slot-scope="scope">
                                    <!-- scope.row 包含表格里当前行的所有数据 -->
                                    <span :class="scope.row.commentType?'act':'inact'">
                                    {{scope.row.commentType | comtype}}<br>
                                     </span>
                                </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" >
                        <template slot-scope="scope">
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType==2"
                                    @click.native.prevent="jpass(scope.row.commentId)"
                                    type="text"
                                    size="small">
                                通过
                            </el-button>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType==1"
                                    @click.native.prevent="block(scope.row.commentId)"
                                    type="text"
                                    size="small">
                                拦截
                            </el-button>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType!=3"
                                    @click.native.prevent="del(scope.row.commentId)"
                                    type="text"
                                    size="small">
                                删除
                            </el-button>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType==3"

                                    type="text"
                                    size="small">
                                无
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </div>
<!--        分页-->
        <div>
            <el-pagination align='center'
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableData.length">
            </el-pagination>
        </div>
    </el-card>
</div>
</template>

<script>
    export default {
        name: "CommentList",
        data() {
            return {
                tableData: [],
                //统计评论状态
                tongji:{all:0,pass:0,block:0,del:0},
                //统计历史评论次数和人数
                commentime:{historynumberuser:0},
                //统计当日评论次数和人数
                newdatecommenttime:{newdatetime:0,newdatenumbertime:0},

                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
            }
        },
        methods: {
            //返回上一层
            returnPage(){
                if (window.history.length <= 1) {
                    this.$router.push();
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            //查看表格数据

            getCommentlist() {
                this.tongji.all=0;
                this.tongji.pass=0;
                this.tongji.block=0;
                this.tongji.del=0;
                this.$http.get("/JsComment/getCommentlist").then(res => {
                    console.log(res.data);
                    this.tableData = res.data.comment;

                    //查看评论状态的条数
                    this.tongji.all = this.tableData.length;

                    for (var i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].commentType == 1) {
                            this.tongji.pass += 1;
                            // console.log("pass:"+this.tongji.pass)
                        } else if (this.tableData[i].commentType == 2) {
                            this.tongji.block += 1;
                            // console.log("block:"+this.tongji.block)
                        } else if (this.tableData[i].commentType == 3) {
                            this.tongji.del += 1;
                            // console.log("del:"+this.tongji.del)
                        }
                    }
                })
            },
            // 历史评论人数
            getcommentime() {
                this.$http.get("/JsComment/getCommenttime").then(res => {
                    // console.log(res.data);
                    this.commentime.historynumberuser = res.data;
                })
            },
            //今日评论人数
            getnewdatetime(){
                this.$http.get("/JsComment/getcommentnewdate").then(res => {
                    // console.log(res.data);
                    this.newdatecommenttime.newdatetime = res.data;
                })
            },
            //今日评论词数字
            getnewdatenumbertime(){
                this.$http.get("/JsComment/getcommentnewdatenumber").then(res => {
                    // console.log(res.data);
                    this.newdatecommenttime.newdatenumbertime = res.data;
                })
            },
            //分页
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {

                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {

                this.currentPage = val;
            },
            //通过跳转按钮
            butpass(){
                this.$router.push("/comment/pass");
            },
            //拦截跳转按钮
            butblock(){
                this.$router.push("/comment/unpass");
            },
            //删除跳转按钮
            butdel(){
                this.$router.push("/comment/del");
            },
            //通过按钮改编成拦截状态
            block(row){
                this.$http.get("/JsComment/updcommentblock",{
                    params:{id:row},
                }).then(res=>{
                    this.getCommentlist();
                })
            },
            //通过按钮改编成通过状态
            jpass(row){
                this.$http.get("/JsComment/updcommentpass",{
                    params:{id:row},
                }).then(res=>{
                    this.getCommentlist();
                })
            },
            //通过按钮改编成删除状态
            del(row){
                this.$http.get("/JsComment/updcommentdel",{
                    params:{id:row},
                }).then(res=>{
                    this.getCommentlist();
                })
            },

        },
        created() {
            this.getCommentlist();
            this.getcommentime();
            this.getnewdatetime();
            this.getnewdatenumbertime();
        },
        //过滤器渲染状态的显示文字的
        filters:{
            comtype(val){
                if(val==1){
                    return'通过';
                }else if (val==2){
                    return '拦截';
                }else if (val==3){
                    return '删除';
                }

            }
        }
    }
</script>

<style scoped>
    .box1{
        padding-top: 10px;
        position: relative;
        left: -310px;
     }
</style>